// patch 函数 是 diff 算法的核心
// patch 对比两个虚拟节点，根据 对比结果 生成新的节点，将新的节点挂载到 dom 树

// 旧节点，新节点
import createElement from "./CreateElement";
import Vnode from "./Vnode";
import updateChildren from "./updateChildren";
export default function patch(oldVnode, newVnode) {
    // 将旧节点 转换成 虚拟节点
    if (oldVnode.sel === undefined) {
        console.log('lai')
        oldVnode = Vnode(
            oldVnode.tagName.toLowerCase(), {},
            oldVnode.textContent,
            oldVnode.children,
            oldVnode,
        )
        console.log(oldVnode)
    }

    // 判断 旧的 和 新的节点机是不是 同一个节点
    // 不是 就直接替换，反之 就继续比较
    if (oldVnode.sel !== newVnode.sel) {
        // 将新的 虚拟节点 创建为 真实的 dom节点 (递归创建)
        let newDom = createElement(newVnode)

        let oldDom = oldVnode.elm
            // 添加 新节点
        oldDom.parentNode.insertBefore(newDom, oldDom)
            // 删除 旧结点
        oldDom.parentNode.removeChild(oldDom)
    }
    // 新 旧 的节点 是同一个类型 
    else {
        // 只要不是 新旧 都有子节点，都好办
        // 新的 没有子节点
        if (newVnode.children === undefined) {
            console.log('newVnode.children === undefined')
            if (oldVnode.elm.innerHtml !== '') oldVnode.elm.innerHTML = '' // 清空 旧结点的 子节点
            if (oldVnode.elm.innetext !== newVnode.text) oldVnode.elm.innerText = newVnode.text // 更新 innerText
        }
        // 新的有，旧的没有
        else {
            if (oldVnode.children === undefined || oldVnode.children.length === 0) {
                console.log("oldVnode.children === undefined || oldVnode.children.length === 0")
                oldVnode.elm.innerText = ''
                for (let element of newVnode.children) {
                    let child = createElement(element)
                    oldVnode.elm.appendChild(child)
                }
            }
            // 新旧 都有 子节点（diff 算法的核心，最复杂的点）
            else {
                // 调用更新函数
                updateChildren(oldVnode.elm, oldVnode.children, newVnode.children)
            }
        }

    }
}

// sel, data, text, children, elm, key